import React, { Component, useState, useEffect } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions } from 'react-native';
import styles from '../styles/style'

export default function Onboarding({ navigation }) {
    const [min_count, setMinCount] = useState(4)
    const [count, setCount] = useState(3)
    const [weeks, setWeeks] = useState([
        { 'name': 'Monday', choose: true },
        { 'name': 'Tuesday', choose: false },
        { 'name': 'Wednesday', choose: true },
        { 'name': 'Thursday', choose: false },
        { 'name': 'Friday', choose: true },
        { 'name': 'Saturday', choose: false },
        { 'name': 'Sunday', choose: false }
    ])

    useEffect(() => {
        chooseCount()
    }, [])

    const chooseCount = () => {
        var count = 0;
        weeks.map((item) => {
            if (item.choose) {
                count++;
            }
        })
        setCount(count)
    }

    const next = () => {

    }

    const chooseWeek = (item) => {
        item.choose = !item.choose;
        chooseCount()
        setWeeks(weeks)
    }

    return (
        <View style={styles.container}>
            <Text style={styles.onboarding_title}>Choose your weekly structure:<Text style={styles.text_theme}>{count}/{min_count} selected</Text></Text>
            <Text style={styles.onboarding_desc}>Selected are the suggested weekly structure</Text>
            {
                weeks.map((item, index) => {
                    return <TouchableOpacity style={item.choose ? [styles.week_item, styles.week_item_sel] : styles.week_item} key={index} onPress={() => chooseWeek(item)}>
                        <Text style={[styles.text_333, styles.text_bold]}>{item.name}</Text>
                        <Image style={styles.week_item_choose_icon} source={item.choose ? require('../resource/check_circle.png') : require('../resource/check_disable.png')} />
                    </TouchableOpacity>
                })
            }
            <View style={styles.row_center}>
                {
                    count >= min_count ?
                        <TouchableOpacity style={styles.start_btn} onPress={() => next()}>
                            <Text style={[styles.text_white, styles.text_bold]}>Next</Text>
                        </TouchableOpacity> :
                        <View style={[styles.start_btn, styles.disable_btn]}>
                            <Text style={[styles.text_white, styles.text_bold]}>Next</Text>
                        </View>
                }
            </View>
        </View>
    )
}